<template>
  <section class="" @click="">
    <div v-if="!hideRobot" class="robot css3-notification" :class="robotClass"><img src="../../../static/images/dangjian/robot/robot.png" alt=""></div>
    <div @click="showTip" class="robot-in-slide" :class="robotInSlideClass"><img src="../../../static/images/dangjian/robot/robot-in-slide.png" alt="">
      <div v-if="isShowTip" class="robot-voice">我是你的党务小助手，关于党务方面的问题可以问我哦！</div>
    </div>
  </section>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        robotClass: '',
        robotInSlideClass: '',
        timer: '',
        isShowTip: false,
        hideRobot: false
      }
    },
    created () {
      if (this.$localStorage.get('robotShow')) {
        this.hideRobot = true
      }
      this.$localStorage.set('robotShow', true)
      this.timer = setTimeout(() => {
        this.robotClass = 'hide'
        setTimeout(() => {
          this.robotInSlideClass = 'show'
        }, 500)
      }, 3000)
    },
    beforeDestroy () {
      clearTimeout(this.timer)
    },
    methods: {
      showTip () {
        // 不用提示
        this.isShowTip = true
        this.hideTip()
      },
      hideTip () {
        setTimeout(() => {
          this.isShowTip = false
          this.openDangwu()
        }, 2500)
      },
      openDangwu () {
        if (window.android && window.android.openDangwu) {
          window.android.openDangwu()
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .robot {
    position:fixed;
    z-index: 8;
    width:418px;
    height:466px;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    transition:left 1.3s, top 1.2s ;
    img {
      @include fullImg();
    }
    &.hide {
      left:200%;
      top:330px;
    }
  }
  .robot-in-slide {
    position:fixed;
    z-index: 8;
    width:81px;
    height:140px;
    right:-2000px;
    top:330px;
    transition:left 0.6s ;
    img {
      @include fullImg();
    }
    &.show {
      right:0;
    }
    .robot-voice {
      position:absolute;
      font-size:14PX;
      width:45vw;
      padding:10px 20px;
      background:#fff;
      right:100px;
      top:0;
      border-radius:20px;
      &::after {
        position: absolute;
        content:'';
        display:block;
        width:30px;
        height:30px;
        background:#fff;
        transform:rotate(45deg) translateY(-50%);
        right:-0px;
        top:30%;
      }
    }
  }

</style>
